<script type="text/JavaScript"> 

$(document).ready(
	function ()
	{
		$('#loading').hide();

		$('#search').click(function()
		{
			$('#result').hide();
			$('#loading').show();
				        
			var fromCity = $("#fromCity").val();
			var toCity = $("#toCity").val();
						
			$.ajax(
					{
						url: "interfaz/search_result.php",
					    data: "fromCity="+fromCity+"&toCity="+toCity,
					    success: function(msg)
					    {
					        //hide the progress bar
					        $('#loading').hide();   
					             
					        //add the content retrieved from ajax and put it in the #content div
					        $('#result').html(msg);
					             
					        //display the body with fadeIn transition
					        $('#result').fadeIn('slow');  
					      }
				});		
		});	

		$( "#toCity" ).autocomplete(
		{
		    source: "./interfaz/toCityList.php?toOrFrom=to"	,
		        width: 320,
		            dataType: 'json',
		            highlight: false,
		            scroll: true,
		            scrollHeight: 300
		 });

		$( "#fromCity" ).autocomplete(
		{
			source: "./interfaz/toCityList.php?toOrFrom=from"	
		});
	});


</script> 


Search You Flight:
<form method="post" action="index.php">
	<div>
		<table>
			<tr><td>From: </td><td><input type="text" name="fromCity" id="fromCity" /></td></tr>
			<tr><td>To:</td><td>   <input type="text" name="toCity" id="toCity" /></td></tr>
			<tr><td><input type="button" id="search" value="Search Flights"/></td></tr>
		</table>
		<input type="hidden" name="content" value="Search_Result"/>
	</div>
</form>

 	<div class="loading"><img id="loading" src="img/loading.gif"/></div>
 	
 	<div id="result" align="center"></div>

